<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="手机号：">
            <el-input v-model="listQuery.mobilePhone" class="input-width" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="车牌号：">
            <el-input v-model="listQuery.vehiclePlate" class="input-width" placeholder="请输入车牌号"></el-input>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="listQuery.state" class="input-width" placeholder="全部" clearable>
              <el-option v-for="item in orderSatuas"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="引流渠道：">
            <el-select v-model="listQuery.channelType" class="input-width" placeholder="全部" clearable>
              <el-option v-for="item in channelTypes"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="引流渠道名称：">
            <el-input v-model="listQuery.name" class="input-width" placeholder="请输入引流渠道名称"></el-input>
          </el-form-item>
          <el-form-item label="订单同步状态：">
            <el-select v-model="listQuery.synTag" class="input-width" placeholder="全部" clearable>
              <el-option v-for="item in synTagList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" " >
            <el-button
              @click="handleResetSearch()"
              icon="el-icon-refresh"
              size="small">
              重置
            </el-button>
            <el-button
              class="btn-line"
              type="primary"
              icon="el-icon-search"
              @click="handleSearchList()"
              size="small">
              查询搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never" style="display: none">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="orderTable"
                :data="list"
                style="width: 100%;"
                v-loading="listLoading" border>
        <el-table-column label="手机号"  width="120" align="center">
          <template slot-scope="scope">{{scope.row.mobilePhone}}</template>
        </el-table-column>
        <el-table-column label="车牌号"  align="center">
          <template slot-scope="scope">{{scope.row.vehiclePlate}}</template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">{{scope.row.state | formatState}}</template>
        </el-table-column>
        <el-table-column label="引流渠道类型"  align="center">
          <template slot-scope="scope">{{scope.row.channleType | formatChannleType}}</template>
        </el-table-column>
        <el-table-column label="引流渠道名称"  align="center">
          <template slot-scope="scope">{{scope.row.name || '-'}}</template>
        </el-table-column>
        <el-table-column label="办理时间"  align="center">
          <template slot-scope="scope">{{scope.row.createTime}}</template>
        </el-table-column>
        <el-table-column label="车主签约状态"  align="center">
          <template slot-scope="scope">{{scope.row.vehicleOwnerServiceState | formatServiceState}}</template>
        </el-table-column>
        <el-table-column label="支付订单号"  align="center">
          <template slot-scope="scope">{{scope.row.payOrderNo}}</template>
        </el-table-column>
        <el-table-column label="支付金额"  align="center">
          <template slot-scope="scope">{{scope.row.payAmount | formatMoney}}</template>
        </el-table-column>
        <el-table-column label="物流公司"  align="center">
          <template slot-scope="scope">{{scope.row.logisticsCompanyName || '-'}}</template>
        </el-table-column>
        <el-table-column label="物流单号"  align="center">
          <template slot-scope="scope">{{scope.row.logisticsOddNumbers || '-'}}</template>
        </el-table-column>
        <el-table-column label="订单同步状态"  align="center">
          <template slot-scope="scope">{{scope.row.synTag | formatSynTag}}</template>
        </el-table-column>
        <el-table-column label="退款操作" width="100"  align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state >=2 && scope.row.state <= 6"
              size="mini"
              type="danger"
              @click="refund(scope.row)"
            >退款</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              plain
              icon="el-icon-magic-stick"
              @click="handleViewOrder(scope.row)"
            >查看资料</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="changeOrderHandle(scope.row)"
            >修改订单状态</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :total="total">
      </el-pagination>
    </div>
    <!--修改状态弹窗-->
    <el-dialog title="修改订单状态" width="30%"  :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="订单状态：">
          <el-select v-model="dialogForm.orderState" class="input-width" placeholder="全部" clearable>
            <el-option v-for="item in orderSatuas"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeOrder">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import { mapGetters  } from 'vuex'
  import {formatDate, moneyFormat} from '@/utils/tools';
  import { Message,MessageBox } from 'element-ui'
  import requestApi from '@/api/index.js'

  const orderSatuas = [
    {
      label: '待支付',
      value: 1,
    }, {
      label: '已支付',
      value: 2
    }, {
      label: '待审核',
      value: 3
    }, {
      label: '待激活',
      value: 4
    }, {
      label: '已激活',
      value: 5
    }, {
      label: '审核不通过',
      value: 6
    },{
      label: '已退款',
      value: 7
    },{
      label: '已失效',
      value: 0
    },{
      label: '退款中',
      value: 8
    }
  ];
  const channelTypes = [
    {
      label: '城市合伙人',
      value: 1,
    }, {
      label: '渠道合伙人',
      value: 2,
    }, {
      label: '推广员',
      value: 3,
    }, {
      label: 'ETC俱乐部',
      value: 4,
    },
  ];
  const synTags = [
    {
      label: '未同步',
      value: 0,
    }, {
      label: '已同步',
      value: 1,
    }, {
      label: '需人工审核',
      value: 2,
    }
  ];
  const defaultListQuery = {
    pageNum: 1,
    pageSize: 5,
    mobilePhone: '',
    vehiclePlate: '',
    state: '',
    channelType: '',
    name: '',
    synTag: '',
  };

  export default {
    name: "orders",
    data() {
      return {
        listQuery: Object.assign({}, defaultListQuery),
        listLoading: true,
        list: null,
        total: null,
        orderSatuas: JSON.parse(JSON.stringify(orderSatuas)),
        channelTypes: JSON.parse(JSON.stringify(channelTypes)),
        synTagList: JSON.parse(JSON.stringify(synTags)),
        dialogFormVisible: false,
        dialogForm: {
          orderState: '',
          orderId: '',
        }
      }
    },
    created() {
      if (!this.$route.meta.isBack) {
        this.getList();
      }
    },
    activated() {
      console.log(`isBack: ${this.$route.meta.isBack}`);
      if (this.$route.meta.isBack) {
        this.$route.meta.isBack = false;
      }
    },
    filters: {
      formatState(type) {
        let temp = '';
        for (let i = 0; i < orderSatuas.length; i++) {
          if (orderSatuas[i].value == type) {
            temp = orderSatuas[i].label;
            break;
          }
        }
        return temp;
      },
      formatChannleType(type) {
        let temp = '-';
        for (let i = 0; i < channelTypes.length; i++) {
          if (channelTypes[i].value == type) {
            temp = channelTypes[i].label;
            break;
          }
        }
        return temp;
      },
      formatSynTag(type) {
        let temp = '-';
        for (let i = 0; i < synTags.length; i++) {
          if (synTags[i].value == type) {
            temp = synTags[i].label;
            break;
          }
        }
        return temp;
      },
      formatMoney(val) {
        return moneyFormat(val)
      },
      formatServiceState(val) {
        if (val == 0) {
          return '未签约';
        } else if (val == 1) {
          return '已签约';
        } else if (val == 2) {
          return '已解约';
        }
      }
    },
    methods: {
      handleResetSearch() {
        this.listQuery = Object.assign({}, defaultListQuery);
        this.getList();
      },
      handleSearchList() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },
      getList() {
        this.listLoading = true;
        requestApi.orderList(this.listQuery).then((res) => {
          this.listLoading = false;
          if (res.code == 0) {
            this.list = res.rows;
            this.total = res.total;
          } else {
            Message({
              message: res.message,
              type: 'error',
              duration: 3 * 1000
            })
          }
        }).catch(() => {
          Message({
            message:'服务器异常',
            type: 'error',
            duration: 3 * 1000
          })
        })
      },
      refund(row) {
        MessageBox.confirm('执行退款操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.refundHandle(row);
        }).catch(() => {
        });
      },
      refundHandle(row) {
        const orderId = row.payOrderNo.substring(0, row.payOrderNo.length - 6);
        console.log(`orderId:${row.payOrderNo}`);
        console.log(`orderId:${orderId}`);
        this.listLoading = true;
        requestApi.refund({ orderId }).then((res) => {
          this.listLoading = false;
          if (res.code == 0) {
            Message({
              message: '退款成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.getList();
          } else {
            Message({
              message: res.message,
              type: 'error',
              duration: 3 * 1000
            })
          }
        }).catch(() => {
          Message({
            message:'服务器异常',
            type: 'error',
            duration: 3 * 1000
          })
        })
      },
      changeOrderHandle(row) {
        const orderId = row.payOrderNo.substring(0, row.payOrderNo.length - 6);
        this.dialogForm.orderState = '';
        this.dialogForm.orderId = orderId;
        this.dialogFormVisible = true;
      },
      changeOrder() {
        const param = {};
        param.orderId = this.dialogForm.orderId;
        param.state =  this.dialogForm.orderState;
        console.log(param);
        requestApi.editNewOrder(param).then((res) => {
          this.listLoading = false;
          if (res.code == 0) {
            this.dialogFormVisible = false;
           this.getList();
          } else {
            Message({
              message: res.message,
              type: 'error',
              duration: 3 * 1000
            })
          }
        }).catch(() => {
          Message({
            message:'服务器异常',
            type: 'error',
            duration: 3 * 1000
          })
        })
      },
      handleViewOrder(row){
        this.$router.push({path:'/orderDetail',query:{orderId: row.orderId, carNo: row.vehiclePlate}})
      },
    },
  }
</script>
<style scoped>
  .input-width {
    width: 203px;
  }
  .btn-line {
    margin-left: 20px;
  }
</style>


